<template>
  <div style="width: 89vw;height: 160vh; display: flex;flex-direction: column;align-items: center;background-color: rgb(240, 240, 242);">
    <!-- 上面一栏，显示一些基本信息 -->
    <div style="width: 100%;display: flex;flex-direction: row;justify-content: space-around;margin-top: 35px;">
      <div class="smallBag">
        <div class="smallImg">
          <img style="width: 80%;height: 80%;" src="../pic/homePage/ph.png" />
        </div>
        <div class="smallText">
          <div class="smallTatle">今日票房</div>
          <div class="smallMain">{{essentialMsg.todayBoxoffice/10000}}万</div>
          <div class="smallTale">同比昨日：{{essentialMsg.todayIncrease}}%</div>
        </div>
      </div>
      <div class="smallBag">
        <div class="smallImg">
          <img style="width: 80%;height: 80%;" src="../pic/homePage/zb.png" />
        </div>
        <div class="smallText">
          <div class="smallTatle">今日上座率</div>
          <div class="smallMain">{{essentialMsg.Attendance}}%</div>
          <div class="smallTale">同比上月：{{essentialMsg.AttendanceIncrease}}%</div>
        </div>
      </div>
      <div class="smallBag">
        <div class="smallImg">
          <img style="width: 80%;height: 80%;" src="../pic/homePage/pf.png" />
        </div>
        <div class="smallText">
          <div class="smallTatle">本月票房</div>
          <div class="smallMain">{{essentialMsg.monthBoxoffice}}万</div>
          <div class="smallTale">同比上月：{{essentialMsg.monthIncrease}}%</div>
        </div>
      </div>
      <div class="smallBag">
        <div class="smallImg">
          <img style="width: 80%;height: 80%;" :src="essentialMsg.todayTopimg" />
        </div>
        <div @click="todayTopBtn" class="smallText">
          <div class="smallTatle">今日榜首</div>
          <div class="smallMain">{{essentialMsg.todayTop}}</div>
          <div class="smallTale">今日票房：{{essentialMsg.todaymovieBoxoffice/10000}}万</div>
        </div>
      </div>
      <div class="smallBag">
        <div class="smallImg">
          <img style="width: 80%;height: 80%;" :src="essentialMsg.monthTopimg" />
        </div>
        <div @click="monthTopBtn" class="smallText">
          <div class="smallTatle">本月榜首</div>
          <div class="smallMain">{{essentialMsg.monthTop}}</div>
          <div class="smallTale">本月票房：{{essentialMsg.monthmovieBoxoffice/10000}}万</div>
        </div>
      </div>
    </div>

    <!-- 中间主体表格绘制 -->
    <div style="margin-top: 45px; width:100% ;display: flex;flex-direction: row;justify-content: space-around;">
      <!-- 图表 -->
      <div id="allEcharts" style="width: 60%;height: 30.5rem; background-color: white;"></div>

      <!-- 今日排行榜 -->
      <div style="width:30% ;background-color: white;display: flex;flex-direction: column;height: 30.5rem;">
        <div style="margin-top: 4px; margin-bottom: 0.525rem; color: rgba(50, 147, 200, 1);font-size: 28px;font-family: FZZongYi;margin-left: 7px;">今日票房排行</div>
        <hr width="100%" />
        <div @click="firstM" class="phL">
          <div style="color: #cf1100;" class="phl_num">1</div>
          <div class="phl_img1">
            <img class="phl_img2" :src="phSrc[0].movie_img" />
          </div>
          <div class="phl_text1">{{phSrc[0].key_movie}}</div>
          <div style="color: #cf1100;" class="phl_text2">{{phSrc[0].boxOffice/10000}}万</div>
        </div>
        <hr width="100%" />
        <div @click="secondM" class="phL">
          <div style="color: #b5cf08;" class="phl_num">2</div>
          <div class="phl_img1">
            <img class="phl_img2" :src="phSrc[1].movie_img" />
          </div>
          <div class="phl_text1">{{phSrc[1].key_movie}}</div>
          <div style="color: #b5cf08;" class="phl_text2">{{phSrc[1].boxOffice/10000}}万</div>
        </div>
        <hr width="100%" />
        <div @click="thirdM" class="phL">
          <div style="color: #05cfc2;" class="phl_num">3</div>
          <div class="phl_img1">
            <img class="phl_img2" :src="phSrc[2].movie_img" />
          </div>
          <div class="phl_text1">{{phSrc[2].key_movie}}</div>
          <div style="color: #05cfc2;" class="phl_text2">{{phSrc[2].boxOffice/10000}}万</div>
        </div>
        <hr width="100%" />
        <div @click="forthM" class="phL">
          <div class="phl_num">4</div>
          <div class="phl_img1">
            <img class="phl_img2" :src="phSrc[3].movie_img" />
          </div>
          <div class="phl_text1">{{phSrc[3].key_movie}}</div>
          <div class="phl_text2">{{phSrc[3].boxOffice/10000}}万</div>
        </div>
        <hr width="100%" />
        <div @click="fifthM" class="phL">
          <div class="phl_num">5</div>
          <div class="phl_img1">
            <img class="phl_img2" :src="phSrc[4].movie_img" />
          </div>
          <div class="phl_text1">{{phSrc[4].key_movie}}</div>
          <div class="phl_text2">{{phSrc[4].boxOffice/10000}}万</div>
        </div>
      </div>
    </div>

    <!-- 推荐栏 -->
    <div style="width: 98%;display: flex;flex-direction: column;margin-top: 30px;">
      <el-divider content-position="left">热门电影推荐</el-divider>

      <div style="margin-top: 20px; width: 100%;height: 400px;">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="(src, index) in tjSrc" :key="index">
            <img @click="tjBtn(index)" style="width: 100%;height: 100%;" :src="tjSrc[index].imgsrc" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>


    <!-- 弹框 -->
    <el-dialog width="800px" :visible.sync="dialogTableVisible">
      <div>
        <div style="width: 95%;display: flex;flex-direction: row;height: 280px;">
          <div style="margin-left: 40px;height: 100%;width: 30%;">
            <img style="width: 100%; height: 320px;" :src="movieSrc.imgSrc" />
          </div>
          <!-- 介绍内容 -->
          <div style="margin-left: 20px;height: 300px;display: flex;flex-direction: column;margin-top: 20px;">
            <div style="font-size: 28px;color: rgba(250, 106, 7, 1);">{{movieSrc.title}} </div>
            <div style="display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
              <div v-for="(src,index) in movieSrc.range">
                <div style="color: #000000;margin-right: 10px;">{{movieSrc.range[index]}}</div>
              </div>
            </div>
            <div style="color: #000000; display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
              {{movieSrc.direction}} / {{movieSrc.length}}分钟
            </div>
            <div style="color: #000000; display: flex;flex-direction: row; margin-top: 10px;font-size: 20px;">
              {{movieSrc.time}} 中国大陆上映
            </div>

            <div style="margin-top: 15px; display: flex;flex-direction: row;">
              <div style="display: flex;flex-direction: column;">
                <div style="font-size: 28px;color: rgb(50, 147, 200);">累计票房</div>
                <div style="display: flex;flex-direction: row;">
                  <div style="font-size: 28px;color: rgba(193, 1, 1, 1);margin-left: 15px;">{{movieSrc.boxoffice}}</div>
                  <div style="font-size: 20px;color: rgb(50, 147, 200);margin-top: 5px;margin-left: 3px;">万</div>
                </div>
              </div>

              <div style="display: flex;flex-direction: column; margin-left: 20px;">
                <div style="font-size: 28px;color: rgb(50, 147, 200);">猫眼口碑</div>
                <div style="font-size: 28px;color: rgba(193, 1, 1, 1);margin-left: 36px;">{{movieSrc.praise}}</div>
              </div>

              <div style="display: flex;flex-direction: column;margin-left: 23px;">
                <div style="margin-top: 14px;">
                  <el-rate v-model="movieSrc.score" disabled show-score text-color="#ff9900">
                  </el-rate>
                </div>
                <div style="margin-top: 7px;font-size: 16px;">{{movieSrc.personNum}}人参与评分</div>
              </div>
            </div>

          </div>
        </div>

        <div style="width: 100%;height: 325rem; display: flex;flex-direction: column;border: 1px solid rgb(187, 187, 187); border-radius: 4px;background-color: rgba(245, 245, 245, 0.45);">
          <!-- 剧情简介 -->
          <div class='dialog_IandT' style="margin-top: 60px;">
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/fa-film.svg" />
            </div>
            <div class="dialog_Text">剧情简介</div>
          </div>
          <div style="width: 90%; margin-top: 10px; margin-left: 20px;font-size: 20px;color: rgba(16, 16, 16, 0.85);">
            {{movieSrc.introduction}}
          </div>
          <!-- 演员介绍 -->
          <div class='dialog_IandT'>
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/actor.png" />
            </div>
            <div class="dialog_Text">演职人员</div>
          </div>
          <!-- 演员图片 -->
          <div style="width: 90%; margin-top: 10px; margin-left: 20px;display: flex;flex-direction: row;">
            <div style="width: 160px;height: 210px; display: flex;flex-direction: column;" v-for="(src, index) in movieSrc.actorSrc"
              :key="index">
              <div style="width:100% ;height:70% ;display: flex;justify-content: center;align-items: center;">
                <img style="width: 80%;height: 100%;" :src="movieSrc.actorSrc[index].imgSrc" />
              </div>
              <div style="margin-top: 5px; font-size: 20px;color: #000000; display: flex;justify-content: center;align-items: center;">{{movieSrc.actorSrc[index].name}}</div>
              <div style="margin-top: 5px;font-size: 16px; display: flex;justify-content: center;align-items: center;">饰{{movieSrc.actorSrc[index].roleName}}</div>
            </div>
            <div style="width: 50px;height: 160px;display: flex;justify-content: center;align-items: center;">
              <img src="../pic/homePage/fa5-ellipsis-h.svg" />
            </div>

          </div>

          <!-- 票房排行 -->
          <div class='dialog_IandT'>
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/antOutline-line-chart@1x.png" />
            </div>
            <div class="dialog_Text">票房</div>
          </div>

          <!-- 票房显示图 -->
          <div style="margin-top: 20px; width: 95%;display:flex;justify-content: center;flex-direction: row;">
            <div style="display: flex;justify-content: center; width: 80%;height: 100px;border: 1px solid rgb(187, 187, 187);border-radius: 8px;background-color: rgba(232, 232, 232, 0.41);">
              <div style="width: 90%;display: flex;flex-direction: row;justify-content: space-around;">
                <div style="width:23%;display: flex;flex-direction: column;">
                  <div style="margin-top: 15px; color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.ranking}}</div>
                  <div style="margin-top: 5px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">昨日排名</div>
                </div>

                <div style="width:23%;display: flex;flex-direction: column;">
                  <div style="margin-top: 15px;color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.firstWeekend}}</div>
                  <div style="margin-top: 7px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">首周票房</div>
                </div>

                <div style="width:23%;display: flex;flex-direction: column;">
                  <div style="margin-top: 15px;color: rgba(248, 66, 68, 1);font-size: 30px;display: flex;justify-content: center;">{{movieSrc.allBoxoffice}}</div>
                  <div style="margin-top: 7px;color: rgba(91, 91, 91, 1);font-size: 18px;display: flex;justify-content: center;">累计票房</div>
                </div>
              </div>


            </div>
          </div>

          <!-- 票房折线图 -->
          <div style="margin-top: 20px; width: 95%;display:flex;justify-content: center;flex-direction: row;">
            <div style="display: flex;justify-content: center; width: 80%;height: 300px;border: 1px solid rgb(187, 187, 187);border-radius: 8px;background-color: rgba(232, 232, 232, 0.41);">
              <div id="pfZXT" style="width: 600px;height: 300px;"></div>
            </div>
          </div>
          <!-- 评分 -->
          <div class='dialog_IandT'>
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/antOutline-pie-chart@1x.png" />
            </div>
            <div class="dialog_Text">评分</div>
          </div>

          <div style="margin-top: 20px; width: 100%;display: flex;flex-direction: row;justify-content: center;">
            <div id="ndge_score" style="width: 400px;height:300px;"></div>
          </div>

          <!-- 热门评论 -->
          <div class='dialog_IandT'>
            <div class="dialog_Img1">
              <img class="dialog_Img2" src="../pic/homePage/fa-comment@1x.png" />
            </div>
            <div class="dialog_Text">热门评论</div>
          </div>

          <div style="margin-top: 20px; width: 100%;height: auto;display: flex;flex-direction: column;">
            <div v-for="(src, index) in movieSrc.comments" :key="index" style="margin-left: 5%; width: 90%;display: flex;flex-direction: column;justify-content: center;">
              <!-- 头像以及会员信息 -->
              <div style="display: flex;flex-direction: row;height: 100px;align-items: center;">
                <div style="width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;">
                  <img :src="movieSrc.comments[index].imgSrc" style="width: 80%;height: 80%;border-radius: 50%;" />
                </div>
                <div style="width: 30%; margin-left: 20px;height: 70%;display: flex;flex-direction: column;justify-content: space-around;">
                  <div style="font-size: 18px;color: black;">{{movieSrc.comments[index].name}}</div>
                  <div style="">
                    <el-rate v-model="movieSrc.comments[index].score" disabled show-score text-color="#ff9900">
                    </el-rate>
                  </div>
                </div>
                <!-- 点赞 -->
                <div style="margin-left: 40%;;height: 50%;display: flex;flex-direction: column;justify-content:space-around;">
                  <div>
                    <img style="width: 30px;height: 30px;" src="../pic/homePage/ze-good-job-o.svg" />
                  </div>
                  <div style="font-size: 13px;color: #4e504c;">{{movieSrc.comments[index].num}}</div>
                </div>
              </div>
              <!-- 评论内容 -->
              <div style="margin-top: 10px; font-size: 16px;color: black;">{{movieSrc.comments[index].message}}</div>
              <div style="display: flex;width: 100%;flex-direction: row;">
                <hr width="100%" />
              </div>
            </div>
            <!-- <div style="margin-top: 20px; width: 100%;display: flex;flex-direction: row;justify-content: center;">
              <div style="color: #0011ff;">展示更多评论</div>
            </div> -->
          </div>


          <!-- <img src="../pic/homePage/v2_quqd9s.jpg" /> -->
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios';
  import * as echarts from "echarts";
  import $ from 'jquery'; //在需要使用的页面中
  export default {
    data() {
      return {
        url: 'http://106.13.117.37:8000',
        movieSrc: {
            title: '', //电影名称
            imgSrc: '', //电影封面图
            range: [], //电影类型
            direction: '', //地方
            length: '', //电影时长
            time: '', //上映时间
            boxoffice: '', //累计票房
            praise: '', //猫眼口碑得分
            score: '', //得分（五分制，如果是10分，除以2就行）
            personNum: '', //评分人数
            //电影简介
            introduction: '',
            ranking: '', //票房排名
            firstWeekend: '', //首周票房
            allBoxoffice: '', //累计票房
            boxofficeExchange: [820, 932, 901, 934, 1290, 1330, 1320], //最近一周的票房变化
            score_perstange: [
              { //评分占比，就是5分的占多少，4分的占多少
                value: '',
                name: ''
              },
              {
                value: '',
                name: ''
              },
              {
                value: '',
                name: ''
              },
              {
                value: '',
                name: ''
              },
              {
                value: '',
                name: ''
              },
            ],
            actorSrc: [ //主要演职人员信息
              {
                name: '',
                imgSrc: '',
                roleName: ''
              },
              {
                name: '',
                imgSrc: '',
                roleName: ''
              },
             {
               name: '',
               imgSrc: '',
               roleName: ''
             },
              {
                name: '',
                imgSrc: '',
                roleName: ''
              },
              {
                name: '',
                imgSrc: '',
                roleName: ''
              },
              {
                name: '',
                imgSrc: '',
                roleName: ''
              },
            ],
            comments: [ //评论基本信息
              {
                name: '', //评论人名称
                imgSrc: '', //头像
                score: '', //评分
                num: '', //评论点赞人数
                message: '', //评论内容
              },
              {
                name: '', //评论人名称
                imgSrc: '', //头像
                score: '', //评分
                num: '', //评论点赞人数
                message: '', //评论内容
              },
              {
                name: '', //评论人名称
                imgSrc: '', //头像
                score: '', //评分
                num: '', //评论点赞人数
                message: '', //评论内容
              },
              {
                name: '', //评论人名称
                imgSrc: '', //头像
                score: '', //评分
                num: '', //评论点赞人数
                message: '', //评论内容
              },
              {
                name: '', //评论人名称
                imgSrc: '', //头像
                score: '', //评分
                num: '', //评论点赞人数
                message: '', //评论内容
              },
            ],

          },
        dialogTableVisible: false, //弹框标志位
        essentialMsg: {
          todayBoxoffice: '',
          todayIncrease: '',
          monthBoxoffice: '',
          monthIncrease: '',
          todayTop: '',
          todayTopimg: '',
          todaymovieBoxoffice: '',
          monthTop: '',
          monthTopimg: '',
          monthmovieBoxoffice: '',
          Attendance: '',
          AttendanceIncrease: '',
        },
        Boxoffice: [],
        Attendance: [],
        time:[],
        tjSrc: [
          {
            title: '',
            imgsrc:''
          },
          {
            title: '',
            imgsrc:''
          },
          {
            title: '',
            imgsrc:''
          },
          {
            title: '',
            imgsrc:''
          },
          {
            title: '',
            imgsrc:''
          },
          {
            title: '',
            imgsrc:''
          },
          {
            title: '',
            imgsrc:''
          },
          {
            title: '',
            imgsrc:''
          },
          {
            title: '',
            imgsrc:''
          }, {
            title: '',
            imgsrc:''
          },
        ],
        phSrc: [{
            key_movie: '',
            movie_img: '',
            boxOffice: ''
          },
          {
            key_movie: '',
            movie_img: '',
            boxOffice: ''
          },
          {
            key_movie: '',
            movie_img: '',
            boxOffice: ''
          },
          {
            key_movie: '',
            movie_img: '',
            boxOffice: ''
          },
          {
            key_movie: '',
            movie_img: '',
            boxOffice: ''
          },

        ]
      }
    },
    mounted() {
      this.allImg(this.$data.Boxoffice, this.$data.Attendance)
      this.get_movie_allSrc()
      this.get_today_rank()
      this.get_recommend('攀登者')
      //this.time_refresh()
      this.setXSJYLTime();
      setInterval(this.setXSJYLTime,1000*5);
    },
    methods: {

      setXSJYLTime(){
        this.$data.essentialMsg.todayBoxoffice+=2000;
      },

      get_movie_allSrc() {//获取最上面一栏的基本信息
        let vue = this;
        console.log("获取今日票房排行")
        axios.get(vue.$data.url + '/api/v1/movie/homepage')
          .then(response => {
            if (response.data.msg == 'success') {
              console.log("获取一些基本信息")
              console.log(response)
              //今日榜首信息
              vue.$data.essentialMsg.todayTop = response.data.res.day.day_name
              vue.$data.essentialMsg.todayTopimg = response.data.res.day.day_image
              vue.$data.essentialMsg.todaymovieBoxoffice = response.data.res.day.day_sell
              //本月榜首
              vue.$data.essentialMsg.monthTop = response.data.res.month.month_name
              vue.$data.essentialMsg.monthTopimg = response.data.res.month.month_image
              vue.$data.essentialMsg.monthmovieBoxoffice = response.data.res.month.month_sell
              //今日票房以及上座率
              vue.$data.essentialMsg.todayBoxoffice = parseInt(response.data.res.every_sell[response.data.res.every_sell
                .length - 1]*50)
              vue.$data.essentialMsg.todayIncrease = (response.data.res.sell_rate * 100).toFixed(4);
              vue.$data.essentialMsg.Attendance = parseInt(response.data.res.every_sit[response.data.res.every_sit.length -
                1])
              vue.$data.essentialMsg.AttendanceIncrease = (response.data.res.sit_rate * 100).toFixed(4);
              vue.$data.essentialMsg.monthIncrease = (response.data.res.month_rate * 100).toFixed(4);
              let monthBoxoffice1 = 0;
              for (let i = 0; i <= response.data.res.every_sell.length; i++) {
                if (i != response.data.res.every_sell.length) {
                  monthBoxoffice1 += response.data.res.every_sell[i]*50
                } else {
                  console.log(vue.$data.monthBoxoffice)
                  console.log("1111")
                  let x = Math.ceil(monthBoxoffice1*10000)/10000
                  var ss = x.toString()
                  vue.$data.essentialMsg.monthBoxoffice = ss.substring(0,6)

                }
              }

              //获取折线图中的数据
              for(let i = 0;i < response.data.res.every_sell.length;i++ ){
                vue.$data.Boxoffice.push(response.data.res.every_sell[i]/10000*50)
                vue.$data.Attendance.push(response.data.res.every_sit[i])
                vue.$data.time.push(i+"日")
              }
              vue.allImg(vue.$data.time,vue.$data.Boxoffice,vue.$data.Attendance)



            } else {
              console.error("获取机器列表失败")
            }
          })
      },
      get_today_rank() { //获取今日票房前五的电影
        let vue = this;
        console.log("获取今日票房排行")
        axios.get(vue.$data.url + '/api/v1/movie/today_top5')
          .then(response => {
            if (response.data.msg == 'success') {
              console.log("获取今日票房排行")
              console.log(response)
              for (let i = 0; i <= 4; i++) {
                vue.$data.phSrc[i].movie_img = response.data.res[i].image
                vue.$data.phSrc[i].key_movie = response.data.res[i].name
                vue.$data.phSrc[i].boxOffice = response.data.res[i].sell
              }
              //vue.$data.phSrc = response.data.res
            } else {
              console.error("获取机器列表失败")
            }
          })
      },
      get_recommend(movieName){
        let vue = this;
        console.log("获取推荐电影")
        axios.get(vue.$data.url + '/api/v1/movie/recommand?key='+movieName)
          .then(response => {
            if (response.data.msg == 'success') {
              console.log("获取推荐电影")
              console.log(response)
              for (let i = 0; i < 10; i++) {
                vue.$data.tjSrc[i].title = response.data.res[i].movie_name
                vue.$data.tjSrc[i].imgsrc  = response.data.res[i].movie_img

              }
              //vue.$data.phSrc = response.data.res
            } else {
              console.error("获取机器列表失败")
            }
          })
      },
      tjBtn(index) {
        console.log(index)
        console.log("点击的电影名称为：" + this.$data.tjSrc[index].title)
        this.get_movieSrc(this.$data.tjSrc[index].title)
        this.$data.dialogTableVisible = true
        this.protract()
      },
      todayTopBtn(){
        this.get_movieSrc(this.$data.essentialMsg.todayTop)
        this.$data.dialogTableVisible = true
      },
      monthTopBtn(){
        this.get_movieSrc(this.$data.essentialMsg.monthTop)
        this.$data.dialogTableVisible = true
      },

      firstM() {
        console.log("点击了 "+this.$data.phSrc[0].key_movie)
        this.get_recommend(this.$data.phSrc[0].key_movie)
        this.get_movieSrc(this.$data.phSrc[0].key_movie)
        this.$data.dialogTableVisible = true
        this.protract()
      },
      secondM() {
        console.log("点击了 "+this.$data.phSrc[1].key_movie)
        this.get_recommend(this.$data.phSrc[1].key_movie)
        this.get_movieSrc(this.$data.phSrc[1].key_movie)
        this.$data.dialogTableVisible = true
        this.protract()
      },
      thirdM() {
        console.log("点击了 "+this.$data.phSrc[2].key_movie)
        this.get_recommend(this.$data.phSrc[2].key_movie)
        this.get_movieSrc(this.$data.phSrc[2].key_movie)
        this.$data.dialogTableVisible = true
        this.protract()
      },
      forthM() {
        console.log("点击了 "+this.$data.phSrc[3].key_movie)
        this.get_recommend(this.$data.phSrc[3].key_movie)
        this.get_movieSrc(this.$data.phSrc[3].key_movie)
        this.$data.dialogTableVisible = true
        this.protract()
      },
      fifthM() {
        console.log("点击了 "+this.$data.phSrc[4].key_movie)
        this.get_recommend(this.$data.phSrc[4].key_movie)
        this.get_movieSrc(this.$data.phSrc[4].key_movie)
        this.$data.dialogTableVisible = true
        this.protract()
      },
      protract() { //加载框中的图表绘制
        this.pfzxt(this.$data.movieSrc.boxofficeExchange)
        this.ndge_Score(this.$data.movieSrc.score_perstange)
      },
      pfzxt(data) {
        echarts.init(document.getElementById("pfZXT")).setOption({
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: data,
            type: 'line',
            smooth: true
          }]
        })
      },
      ndge_Score(data) {
        echarts.init(document.getElementById("ndge_score")).setOption({
          legend: {
            top: 'bottom'
          },
          series: [{
            name: '面积模式',
            type: 'pie',
            radius: [10, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: data,
          }]
        })
      },
      allImg(time, BoxofficeData, AttendanceData) {
        echarts.init(document.getElementById("allEcharts")).setOption({
          title: {
            left: 'center',
            text: '本月票房/平均上座率总览',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            left: 'right',
            data: ['票房', '上座率']
          },
          xAxis: [{
            type: 'category',
            data: time,
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
              type: 'value',
              name: '票房',
              min: 0,
              max: 15000,
              interval: 1000,
              axisLabel: {
                formatter: '{value} 万'
              }
            },
            {
              type: 'value',
              name: '上座率',
              min: 0,
              max: 20,
              interval: 5,
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          series: [{
              name: '票房',
              type: 'bar',
              data: BoxofficeData,
            },
            {
              name: '上座率',
              type: 'line',
              yAxisIndex: 1,
              data: AttendanceData,
            },

          ]
        })
      },
      get_movieSrc(movieName){//获取电影详细信息
        console.log("获取该电影的所有信息")
        let vue = this;

        axios.get(vue.$data.url+'/api/v1/movie/detail_movie?name='+movieName)
        	.then(response => {
        		if (response.data.msg == 'success') {
        			console.log("获取该电影的所有信息")
        			console.log(response)
              vue.$data.movieSrc.title = response.data.res.title
              vue.$data.movieSrc.imgSrc = response.data.res.imgSrc
              vue.$data.movieSrc.length = response.data.res.length
              vue.$data.movieSrc.time = response.data.res.time
              //累计票房

              let x1 = Math.ceil(response.data.res.allBoxoffice)/10000
              var ss1 = x1.toString()
              if(ss1.length>=6){
                vue.$data.movieSrc.allBoxoffice = ss1.substring(0,6)
              }else{
                vue.$data.movieSrc.allBoxoffice = ss1.substring
              }
              vue.$data.movieSrc.praise='8.8'
              vue.$data.movieSrc.score = response.data.res.score/2
              vue.$data.movieSrc.personNum = response.data.res.personNum
              vue.$data.movieSrc.introduction = response.data.res.introduction
              vue.$data.movieSrc.direction = response.data.res.direction
              //vue.$data.movieSrc.firstWeekend = response.data.res.firstWeekend
              let x2 = Math.ceil(response.data.res.firstWeekend)/10000
              var ss2 = x2.toString()
              vue.$data.movieSrc.firstWeekend = ss2.substring(0,6)
              vue.$data.movieSrc.ranking = response.data.res.ranking
              for(let i = 0;i < response.data.res.actorSrc.length;i++){
                vue.$data.movieSrc.actorSrc[i].name = response.data.res.actorSrc[i].movie_star_name.replace(/\s[\x00-\xff]*/g,'')
                vue.$data.movieSrc.actorSrc[i].imgSrc = response.data.res.actorSrc[i].movie_star_img
                vue.$data.movieSrc.actorSrc[i].roleName = response.data.res.actorSrc[i].movie_star_role
              }
              for(let i = 0;i < response.data.res.comments.length;i++){
                vue.$data.movieSrc.comments[i].name = response.data.res.comments[i].movie_comment_person_name
                vue.$data.movieSrc.comments[i].score = response.data.res.comments[i].movie_comment_person_score/10
                vue.$data.movieSrc.comments[i].imgSrc = response.data.res.comments[i].movie_comment_person_img
                vue.$data.movieSrc.comments[i].num = response.data.res.comments[i].movie_comment_thumb
                vue.$data.movieSrc.comments[i].message = response.data.res.comments[i].movie_comment
              }
              for(let i = 0;i < response.data.res.score_perstange.length;i++){
                vue.$data.movieSrc.score_perstange[i].name = response.data.res.score_perstange[i].name
                vue.$data.movieSrc.score_perstange[i].value = response.data.res.score_perstange[i].value.match(/(\S*)%/)[1]
                console.log(response.data.res.score_perstange[i].value.match(/(\S*)%/)[1])
              }
              console.log(vue.$data.movieSrc.score_perstange)
              vue.ndge_Score(vue.$data.movieSrc.score_perstange)
              vue.$data.movieSrc.range = []
              for(let i = 0;i < response.data.res.range.length;i++){
                vue.$data.movieSrc.range.push(response.data.res.range[i])
              }
              this.pfzxt(vue.$data.movieSrc.boxofficeExchange)

        		} else {
        			console.error("获取机器列表失败")
        		}
        	})
      },
    },
  }
</script>

<style>
  .dialog_IandT {
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    height: 40px;
    margin-top: 20px;
  }

  .dialog_Img1 {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog_Img2 {
    width: 90%;
    height: 90%;
  }

  .dialog_Text {
    display: flex;
    align-items: center;
    font-family: PingFangSC;
    font-size: 28px;
    color: rgb(19, 19, 19);
    font-style: normal;
    margin-left: 15px;
    font-weight: bold;
  }


  .el-divider__text {
    position: absolute;
    background-color: rgb(240, 240, 242);
    padding: 0 20px;
    color: #303133;
    font-size: 24px;
  }

  .smallBag {
    width: 15%;
    height: 6rem;
    border-radius: 3%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: white;
  }

  .smallImg {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .smallText {
    margin-top: 6px;
    margin-bottom: 6px;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .smallTatle {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    font-size: 16px;
    color: #000000;
  }

  .smallMain {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: row-reverse;
    color: rgb(64, 158, 255);
  }

  .smallTale {
    width: 100%;
    font-size: 12px;
    display: flex;
    flex-direction: row-reverse;
    color: rgb(116, 116, 116);
  }

  .smallBag:hover {
    transform: scale(1.1, 1.1);
    background-color: aquamarine;
  }

  .phL {
    width: 100%;
    height: 14%;
    display: flex;
    flex-direction: row;
  }

  .phL:hover {
    background-color: #ced4c9;
  }

  .phl_num {
    font-size: 20px;
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .phl_img1 {
    margin-left: 5%;
    width: 16%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .phl_img2 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .phl_text1 {
    font-size: 16px;
    width: 30%;
    margin-left: 3%;
    height: 100%;
    display: flex;

    align-items: center;
  }

  .phl_text2 {
    font-size: 18px;
    width: 20%;
    margin-left: 3%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
